import { UnControlled as CodeMirror2 } from 'react-codemirror2'
import 'codemirror/lib/codemirror.css'
import 'codemirror/lib/codemirror.js'

// 代码格式
import 'codemirror/mode/python/python.js'
// 主题
import 'codemirror/theme/ayu-dark.css'
// 代码高亮
import 'codemirror/addon/selection/active-line'

// ctrl+空格 代码提示补全
import 'codemirror/addon/hint/show-hint.css'
import 'codemirror/addon/hint/show-hint'
import 'codemirror/addon/hint/anyword-hint'

// 折叠代码
import 'codemirror/addon/fold/foldgutter.css'
import 'codemirror/addon/fold/foldgutter'

import styles from './index.module.less'

interface CodeMirrorProps {
  code: string
  handleCodeChange: (code: string) => void
}

const CodeMirror = ({ code, handleCodeChange }: CodeMirrorProps) => {
  return (
    <CodeMirror2
      className={styles['code-mirror-container']}
      value={code}
      options={{
        mode: 'text/x-cython',
        theme: 'ayu-dark',
        styleActiveLine: true, // 当前行代码高亮
        lineNumbers: true, // 显示行号
        smartIndent: true, // 自动缩进
        gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter']
      }}
      editorDidMount={editor => {
        editor.setSize('100%', '100%')
      }}
      onChange={(editor, data, value) => {
        handleCodeChange(value)
      }}
    />
  )
}
export default CodeMirror
